<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="author" content="" />
	<meta name="description" content="" />

	<title>jQuery.parallax</title>

	<script>document.documentElement.className = 'js';</script>

	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
	<!-- Force latest IE rendering engine & Chrome Frame -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<!-- Make IE recognise HTML5 elements for styling -->
	<!--[if lte IE 8]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<noscript>
		<strong>Warning!</strong>
		Your browser does not support HTML5 so some elements on this page are simulated using JScript. Unfortunately your browser has JScript disabled. Please enable it in order to display this page.
	</noscript>
	<![endif]-->
	<!-- Disable image toolbar in IE6 -->
	<!--[if lte IE 6]><meta http-equiv="imagetoolbar" content="no" /><![endif]-->

	<link rel="icon" type="image/png" href="images/favicon.png" />
	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

	<link rel="stylesheet" type="text/css" href="http://stephband.info/css/template.min.css" />
	<link rel="stylesheet" type="text/css" href="http://stephband.info/css/template.theme.min.css" />

	<link rel="stylesheet" type="text/css" href="http://stephband.info/css/site.layout.css" />
	<link rel="stylesheet" type="text/css" href="http://stephband.info/css/docs.classes.css" />
	<link rel="stylesheet" type="text/css" href="http://stephband.info/css/demos.theme.css" />

	<!--[if (lt IE 9)&(!IEMobile)]>
	<link rel="stylesheet" href="http://stephband.info/css/template.layout.32em.css" media="all" />
	<link rel="stylesheet" href="http://stephband.info/css/template.layout.48em.css" media="all" />
	<![endif]-->
	<!--[if lte IE 8]><link rel="stylesheet" href="http://stephband.infocss/template.ie.css" /><![endif]-->
	<!--[if IE 8]><link rel="stylesheet" href="http://stephband.infocss/template.ie8.css" /><![endif]-->
	<!--[if IE 7]><link rel="stylesheet" href="http://stephband.infocss/template.ie7.css" /><![endif]-->
	<!--[if IE 6]><link rel="stylesheet" href="http://stephband.infocss/template.ie6.css" /><![endif]-->
	
	<link rel="stylesheet" href="../css/jquery.parallax.css" />

  <style type="text/css" media="screen, projection">
    #port {
        margin: 1.5em 0px;
        overflow: hidden;
        position: relative;
        /*width: 700px;*/
        height: 168px;
        border-left: 1px solid black;
        border-right: 1px solid black;
        padding: 24px 64px;
    }

    .parallax-layer {
        position: absolute;
    }
    
    /* Horizontal lists of inline-blocks, with image backgrounds as thumbnails */
    /* Tested in Safari 4 | FF 3.5 | Opera 9.6 | IE7 */ 
    .thumbs_index {
        padding: 0 12px;
        /* initial position */
        left: 0;
        /* Put all he thumbs on one line. */
        white-space: nowrap;
    }
    
    .thumbs_index > li {
        display: inline;
        margin-right: 12px;
    }
    
    .img_thumb {
      padding-top: 120px;
      width: 192px;

      -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
         -moz-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
              box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    }
    
    .footnote { font-size: 0.6em; color: #858b95; }
  </style>
</head>

<body>
	<header class="site_header" id="page_header">
		<div class="site_wrap wrap">
			<a class="logo_thumb thumb" href="http://stephband.info" title="stephband" rel="index">
				<h1>stephband.info</h1>
			</a>
		</div>
	</header>

  <div class="site_wrap wrap">
    <h2>jParallax Demos <a href="target.html">next</a></h2>

    <div id="port">
      <!-- List must be spaceless becuse <li>s are display: inline, and any spaces between them show in IE -->
      <ul class="thumbs_index index parallax-layer">
         <li><a class="img_thumb thumb" href="#" style="background: url('http://webdev.stephband.info/jparallax/images/parallax_thumbnails/1.jpg');">item</a></li
        ><li><a class="img_thumb thumb" href="#" style="background: url('http://webdev.stephband.info/jparallax/images/parallax_thumbnails/2.jpg');">item</a></li
        ><li><a class="img_thumb thumb" href="#" style="background: url('http://webdev.stephband.info/jparallax/images/parallax_thumbnails/3.jpg');">item</a></li
        ><li><a class="img_thumb thumb" href="#" style="background: url('http://webdev.stephband.info/jparallax/images/parallax_thumbnails/4.jpg');">item</a></li
        ><li><a class="img_thumb thumb" href="#" style="background: url('http://webdev.stephband.info/jparallax/images/parallax_thumbnails/5.jpg');">item</a></li
        ><li class="last"><a class="img_thumb thumb" href="#" style="background: url('http://webdev.stephband.info/jparallax/images/parallax_thumbnails/6.jpg');">item</a></li>
      </ul>
    </div>

    <div class="footnote">Photos by <a href="http://flickr.com/daweed/">David Michon</a></div>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
  <script src="../js/jquery.parallax.js"></script>
  <script type="text/javascript">
  jQuery(document).ready(function(){
    // Declare parallax on layers
    jQuery('.parallax-layer').parallax({
      mouseport: jQuery("#port"),
      yparallax: false
    });
  });
  </script>

<!-- Enable png transparency in IE6 -->
<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery.ifixpng.js"></script>
<script type="text/javascript">jQuery(document).ready(function(){ jQuery("img[src$='png']".ifixpng(); });</script>
<![endif]-->

</body>
</html>